<template>
  <div class="wrapper compose">
    <div class="compose-top-bar">
      <a class="compose-btn-cancel" href="javascript:;" @click="cancel()">取消</a>
      <span>发微博</span>
      <a class="compose-btn-send" href="javascript:;" @click="send()">发送</a>
    </div>
    <div class="compose-cont">
      <textarea name="" id="" placeholder="分享新鲜事..." maxlength="140" v-model="content"></textarea>
    </div>
  </div>
</template>
<style>
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #f5be86;
  }

  textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #f5be86;
  }

  textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #f5be86;
  }

  textarea:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #f5be86;
  }
</style>
<script>
  export default{
    data () {
      return {
        content: ''
      }
    },
    created () {
      console.log('Component weibo edit created')
    },
    destroyed () {
      console.log('Component weibo edit destroyed')
    },
    mapActions: ['addWeibo'],
    mapGetters: ['weiboList'],
    methods: {
      cancel () {
        this.$router.push({ path: '/' })
      },
      filter (content) {
        return content
              .replace(/&/g, '&amp;')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#39;')
              .replace(/#/g, '&#35;')
              .replace(/$/g, '&#36;')
      },
      send () {
        if (this.contentValid) {
          const content = this.content
          const self = this
          this.filter(content)
          this.addWeibo({
            body: {
              body: {
                details: content,
                praise: 0,
                avatar: 'images/pic/avatar.jpg',
                userName: '235022',
                createTime: Date.now(),
                createFrom: '来自搞笑达人'
              }
            },
            then: [data => {
              self.content = ''
              return data
            }],
            err: [err => {
              return err
            }]
          }).then(data => {
            self.$router.push({ path: '/' })
          })
        }
      }
    },
    computed: {
      contentValid () {
        return this.content.length > 0 && this.content.length <= 140
      }
    },
    components: {}
  }
</script>
<style src="../styles/index"></style>
